<template>
    <div class="organization-container">
        <div class="top">
            <div>
                <!--当前选中的是公司显示-->
                <el-dropdown v-if="formTreeData.type !== 2" @command="addCompany">
                    <el-button type="primary" size="small" icon="el-icon-plus">
                        {{ translate('button.add') }}<i class="el-icon-arrow-down"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" placement="button-end">
                        <el-dropdown-item command=1>
                            {{ translate('label.sameLevelCompany') }}
                        </el-dropdown-item>
                        <el-dropdown-item command=2>
                            {{ translate('label.subordinateCompany') }}
                        </el-dropdown-item>
                        <el-dropdown-item command=3>
                            {{ translate('label.subordinateDepartment') }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--当前选中是部门-->
                <el-dropdown v-else @command="addDepartment">
                    <el-button type="primary" size="small" icon="el-icon-plus">
                        {{ translate('button.add') }}<i class="el-icon-arrow-down"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" placement="button-end">
                        <el-dropdown-item command=1>
                            {{ translate('label.sameLevelDepartment') }}
                        </el-dropdown-item>
                        <el-dropdown-item command=2>
                            {{ translate('label.subordinateDepartment') }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <!--导入导出的下拉菜单-->
                <el-dropdown>
                    <el-button size="small" class="iconfont icon-icon_function_daorudaochu">
                        {{ translate('button.importAndExport') }}
                        <i class="el-icon-arrow-down"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item> {{ translate('label.importCompany') }}</el-dropdown-item>
                        <el-dropdown-item>{{ translate('label.importSubordinate') }}</el-dropdown-item>
                        <el-dropdown-item divided>{{ translate('label.exportOrganization') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <!--同步组织机构-->
            <el-dropdown>
                <el-button>
                    <i class="iconfont icon-filesync"></i>
                    {{ translate('button.synchronize') }}
                    <i class="el-icon-arrow-down"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item> {{ translate('label.importCompany') }}</el-dropdown-item>
                    <el-dropdown-item>{{ translate('label.importSubordinate') }}</el-dropdown-item>
                    <el-dropdown-item>{{ translate('label.exportOrganization') }}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="content" ref="content">
            <div class="resizeLeft">
                <div class="leftRoll">
                    <el-input :placeholder="translate('label.inputName')" v-model="treeSearch">
                        <el-button @click="search" slot="prepend" icon="el-icon-search"></el-button>
                    </el-input>
                    <!--树-->
                    <el-tree :highlight-current="true"
                             ref="leftTree"
                             :load="lazyLoad"
                             lazy
                             :data="treeDataList"
                             :props="defaultProps"
                             node-key="orgId"
                             @node-click="handleNodeClick"
                             :default-expanded-keys="defaultExpanded">
                        <span slot-scope="{ node, data }" class="tree-slot" :class="{'disabled-node':!data.enabled}">
							<vab-icon icon="building-fill" v-if="data.type === orgTypeEnum.company"/>
							<vab-icon icon="stack-fill" v-if="data.type === orgTypeEnum.department"/>
							{{ data.code ? ('\u3010' + data.code + '\u3011' + data.name) : data.name }}
                        </span>
                    </el-tree>
                </div>
                <!--公司总数-->
                <div class="footer">
                    <span class="count">{{ translate('label.companyCount') }}：{{ companyCount }}</span>
                    <span class="count">{{ translate('label.departmentCount') }}：{{ departmentCount }}</span>
                </div>
            </div>
            <div class="resize" ref="resize"></div>
            <div class="mid">
                <el-form ref="formTreeData"
                         label-width="80px"
                         :model="formTreeData"
                         label-position="top"
                         :rules="rules"
                         :disabled="!enabled">
                    <div class="fromInput">
                        <div class="fromLeft">
                            <el-form-item :hide-required-asterisk="true"
                                          :label="translate(formTreeData.type===1?'label.companyName':'label.departmentName')"
                                          prop="name">
                                <el-input
                                    :clearable="true"
                                    v-model="formTreeData.name"
                                    :placeholder="formTreeData.name"
                                    maxlength="50"
                                    class="readonly"/>
                            </el-form-item>
                            <el-form-item :label="translate('label.Superior')" prop="fullName">
                                <el-popover placement="bottom-end" trigger="click">
                                    <el-input readonly slot="reference" v-model="formTreeData.parentName"/>
                                    <div v-if="enabled" class="question-row popover-list">
                                        <!--选树-->
                                        <el-tree :load="lazyLoad" lazy :data="treeDataList" :props="defaultProps"
                                                 node-key="orgId"
                                                 @node-click="selectClick">
                                            <span slot-scope="{ node, data }" class="tree-slot">
                                                <vab-icon icon="building-fill"
                                                          v-if="data.type === orgTypeEnum.company"/>
                                                <vab-icon icon="stack-fill"
                                                          v-if="data.type === orgTypeEnum.department"/>
                                                {{ data.name }}
                                            </span>
                                        </el-tree>
                                    </div>
                                </el-popover>
                            </el-form-item>
                            <el-form-item :label="translate('label.abbreviation')" prop="abbreviation">
                                <el-input v-model="formTreeData.abbreviation"/>
                            </el-form-item>
                            <el-form-item :label="translate('label.description')" prop="remark">
                                <el-input v-model="formTreeData.remark" type="textarea"
                                          rows="8"
                                          maxlength="300"
                                          show-word-limit
                                          :placeholder="translate('label.inputContent')"/>
                            </el-form-item>
                        </div>
                        <div class="fromRight">
                            <el-form-item
                                :label="translate(formTreeData.type===1?'label.companyCode':'label.departmentCode')"
                                prop="code">
                                <el-input v-model="formTreeData.code" maxlength="20" class="readonly"/>
                            </el-form-item>
                            <el-form-item :label="translate('label.displayOrder')" prop="sort">
                                <el-input v-model="formTreeData.sort"/>
                            </el-form-item>
                            <el-form-item :label="translate('label.chineseLevelName')" prop="fullName">
                                <el-input v-model="formTreeData.fullName" disabled/>
                            </el-form-item>
                            <el-form-item :label="translate('label.spareOne')" prop="backupOne">
                                <el-input v-model="formTreeData.backupOne"
                                          maxlength="25"/>
                            </el-form-item>
                            <el-form-item :label="translate('label.spareTwo')" prop="backupTwo">
                                <el-input v-model="formTreeData.backupTwo"
                                          maxlength="25"/>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
                <div class="formBtn">
                    <el-button type="primary" size="small" :disabled="!enabled" :class="enabled?'':'gray'" class="iconfont icon-baocunfuben" @click="modify">
                        {{ translate('button.save') }}
                    </el-button>
                    <el-button type="danger" :disabled="!enabled" :class="enabled?'':'gray'" icon="el-icon-delete" @click="delData" plain>
                        {{ translate('button.delete') }}
                    </el-button>

                    <el-button v-if="enabled" class="iconfont icon-jinyong" @click="Deactivate">
                        {{ translate('button.deactivate') }}
                    </el-button>
                    <el-button v-else type="primary" icon="el-icon-video-play" @click="Deactivate">
                        {{ translate('label.enable') }}
                    </el-button>

                    <el-button icon="el-icon-menu" :disabled="!enabled" :class="enabled?'':'gray'" @click="printCode">
                        {{ translate('button.printCode') }}
                    </el-button>
                </div>
            </div>
        </div>

        <!--新增功能的窗口-->
        <el-dialog :title="labelName"
                   :close-on-click-modal="false"
                   :visible.sync="dialogFormVisible"
                   @close="onCross">
            <el-form ref="formAddData"
                     label-width="80px"
                     :model="formAddData"
                     label-position="top"
                     :rules="rules">
                <div class="fromInput">
                    <div class="fromLeft">
                        <el-form-item :hide-required-asterisk="true"
                                      :label="translate(formAddData.type===1?'label.companyName':'label.departmentName')"
                                      prop="name">
                            <el-input :clearable="true" v-model="formAddData.name" :placeholder="formAddData.name"
                                      maxlength="50"
                                      class="readonly"/>
                        </el-form-item>
                        <el-form-item :label="translate('label.Superior')" prop="fullName">
                            <el-input :value="formAddData.parentName" disabled/>
                        </el-form-item>
                        <el-form-item :label="translate('label.abbreviation')" prop="abbreviation">
                            <el-input v-model="formAddData.abbreviation"/>
                        </el-form-item>
                        <el-form-item :label="translate('label.description')" prop="remark">
                            <el-input v-model="formAddData.remark" type="textarea"
                                      rows="6"
                                      maxlength="300"
                                      show-word-limit
                                      :placeholder="translate('label.inputContent')"/>
                        </el-form-item>
                    </div>
                    <div class="fromRight">
                        <el-form-item
                            :label="translate(formAddData.type===1?'label.companyCode':'label.departmentCode')"
                            prop="code">
                            <el-input v-model="formAddData.code" maxlength="20"
                                      class="readonly"/>
                        </el-form-item>
                        <el-form-item :label="translate('label.displayOrder')" prop="sort">
                            <el-input v-model.number="formAddData.sort"/>
                        </el-form-item>
                        <el-form-item :label="translate('label.chineseLevelName')">
                            <el-input
                                :value="formAddData.name&&formAddData.parentName?formAddData.fullName+'/'+formAddData.name:formAddData.fullName"
                                disabled/>
                        </el-form-item>
                        <el-form-item :label="translate('label.spareOne')" prop="backupOne">
                            <el-input v-model="formAddData.backupOne"
                                      maxlength="25"/>
                        </el-form-item>
                        <el-form-item :label="translate('label.spareTwo')" prop="backupTwo">
                            <el-input v-model="formAddData.backupTwo"
                                      maxlength="25"/>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">{{ translate('button.cancel') }}</el-button>
                <el-button type="primary" @click="increase">{{ translate('button.save') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import {Component} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'
import ResponseModel from '@/common/model/response.model';
import OrganizationService from "./organization-service";
import {OrgTypeEnum} from "@/components-com/person-selection/enums/person-selection.enum";
import TreeNodeModel from "./model/tree-node.model";
import {MessageTypeEnum, ResponseStatusEnum} from "../../../common/enum/common.enum";
import {ElTree, TreeNode} from "element-ui/types/tree";
import {NodeTypeEnum, NodeTypeJudgeEnum} from "@/views/system/organization/enums/org.enum";
import {isNumber} from '@/utils/validate'

@Component({components: {}})
export default class organization extends BaseVue {
    /*树节点类型枚举*/
    private orgTypeEnum = OrgTypeEnum;
    /*表单数据*/
    private formTreeData: TreeNodeModel = new TreeNodeModel();
    /*新增的表单数据*/
    private formAddData: TreeNodeModel = new TreeNodeModel();
    /*搜索内容*/
    private treeSearch: string = '';
    /*树的数据*/
    private treeDataList: TreeNodeModel[] = [];
    private defaultProps = {
        children: 'childrenList',
        label: 'name',
        isLeaf: 'isLeaf',
        disabled: (data, node) => {
            return this.treeDataList.length < 0 || !data.enabled
        }
    };
    /*当前树节点*/
    private currentNode: TreeNode<any, any>;
    $refs: {
        leftTree: ElTree<any, any>,
    };
    /*默认展开的树节点*/
    private defaultExpanded: number[] = [];
    private enabled: boolean = true;
    /*总数*/
    private companyCount: number = 0;
    private departmentCount: number = 0;
    // 当前选中树的id
    private parentId: number = 0;
    /*上级拼接*/
    private fullNameText: string[] = [];
    /*弹框控制*/
    private labelName: string = '';
    private dialogFormVisible: boolean = false;
    /*树的id*/
    private treeNode: TreeNodeModel = new TreeNodeModel();

    /*表单效验*/
    private rules: {
        name: object;
        sort: object;
    };

    private rogRules() {
        this.rules = {
            name: [{required: true, message: this.translate('validate.isName'), trigger: 'blur'}],
            sort: [{validator: isNumber, message: this.translate('validate.isNumber'), trigger: 'blur'}],
        }
    };

    /**
     * 生命周期 created
     * */
    public created() {
        this.rogRules();
    };

    /**
     * 生命周期 mounted
     */
    private mounted() {
        this.dragControllerDiv();
    };

    /**
    * 渲染树
    */
    private updateTree() {
        // 第一次渲染第一层传参0
        OrganizationService.getOrganizationList(0).then((res: ResponseModel<TreeNodeModel>) => {
            const {organizationVOList,companyCount,departmentCount} = res.data;
            if (res.status === ResponseStatusEnum.success) {
                this.treeDataList = organizationVOList || [];
                // 判断是否有子节点还可展开
                this.treeDataList.forEach(item => {
                    if (!item.childrenCount) {
                        item['isLeaf'] = true;
                    }
                });
                // 总数量
                this.companyCount = companyCount;
                this.departmentCount = departmentCount;
            }
        });
    };

    /**
     * 懒加载查询组织机构树数据
     */
    private lazyLoad(node: TreeNode<any, any>, resolve: Function) {
        let orgId: number = this.parentId;
        if (node.level !== 0) {
            orgId = node.data.orgId;
        }
        OrganizationService.getOrganizationList(orgId).then((res: ResponseModel<TreeNodeModel>) => {
            let {companyCount,departmentCount,organizationVOList,} = res.data
            // 总数量
            this.companyCount = companyCount;
            this.departmentCount = departmentCount;
            if (res.status === ResponseStatusEnum.success) {
               organizationVOList = organizationVOList || [];
                // 判断是否有子节点还可展开
               organizationVOList.forEach(item => {
                    if (!item.childrenCount) {
                        item['isLeaf'] = true;
                    }
                });
                return resolve(organizationVOList);
            }
        });
    };

    /**
     * 查询组织机构信息
     */
    private handleNodeClick(val: TreeNodeModel, Node: TreeNode<any, any>) {
        // 存id
        this.parentId = val.parentId;

        this.currentNode = Node;
        this.treeNode.orgId = val.orgId;
        OrganizationService.findInfo(val.orgId).then((res: ResponseModel<TreeNodeModel>) => {
            const {enabled,orgId,parentName,fullName} = res.data;
            if (res.status === ResponseStatusEnum.success) {
                this.enabled = enabled;
                this.formTreeData = res.data;
                this.formTreeData.tid = orgId;
                // 新增需要的数据
                this.formAddData.enabled = enabled;
                this.formAddData.parentName = parentName;
                this.formAddData.fullName = fullName;

            }
        });
    };

    /**
     * 搜索
     */
    private search() {
        // 判断用户是否有输入内容
        if (this.treeSearch) {
            OrganizationService.getSearch(this.treeSearch).then((res: ResponseModel<TreeNodeModel[]>) => {
                if (res.status === ResponseStatusEnum.success) {
                    this.treeDataList = res.data;
                }
            });
        } else {
            // 更新
            this.updateTree();
        }
    };

    /**
     * 新增公司的弹框
     */
    private addCompany(key: string) {
        this.dialogFormVisible = true;
        switch (key) {
            case NodeTypeJudgeEnum.identical:
                this.labelName = this.translate('label.addSameLevelCompany');
                this.formAddData.type = NodeTypeEnum.org;
                this.formAddData.parentId = this.parentId;
                break;
            case NodeTypeJudgeEnum.suborn:
                this.labelName = this.translate('label.addSubordinateCompany');
                this.formAddData.type = NodeTypeEnum.org;
                this.formAddData.parentId = this.treeNode.orgId;
                this.formAddData.parentName = this.formTreeData.name;
                break;
            case NodeTypeJudgeEnum.SubordinateDept:
                this.labelName = this.translate('label.addSubordinateDepartment');
                this.formAddData.type = NodeTypeEnum.dept;
                this.formAddData.parentId = this.treeNode.orgId;
                this.formAddData.parentName = this.formTreeData.name;
                break;
            default:
                break;
        }
    };

    /**
     * 新增部门的弹框
     */
    private addDepartment(key: string) {
        this.dialogFormVisible = true;
        switch (key) {
            case NodeTypeJudgeEnum.identical:
                this.labelName = this.translate('label.addSameLevelDepartment');
                this.formAddData.type = NodeTypeEnum.dept;
                this.formAddData.parentId = this.parentId;
                this.formAddData.parentName = this.formTreeData.parentName;
                break;
            case NodeTypeJudgeEnum.suborn:
                this.labelName = this.translate('label.addSubordinateDepartment');
                this.formAddData.type = NodeTypeEnum.dept;
                this.formAddData.parentId = this.treeNode.orgId;
                this.formAddData.parentName = this.formTreeData.name;
                break;
            default:
                break;
        }
    };

    /**
     * 新增后点击保存
     */
    private increase() {
        if (this.formAddData.name) {
            this.formAddData.fullName = this.formAddData.fullName + '/' + this.formAddData.name;
        }
        this.formAddData.tid = null;
        this.formAddData.enabled = true;
        OrganizationService.saveOrUpdate(this.formAddData).then((res: ResponseModel<TreeNodeModel[]>) => {
            if (res.status === ResponseStatusEnum.success) {
                this.baseMessage('tips.saveSuccess', MessageTypeEnum.success);
                this.dialogFormVisible = false;
                // 清空表单
                this.formAddData = new TreeNodeModel();
                // 更新
                this.updateTree();
            }
        });
    };

    /**
     * 修改
     */
    private modify() {
        // 拼接层级全称
        const fullNameIndex = this.formTreeData.fullName.lastIndexOf('/');
        this.formTreeData.fullName = this.formTreeData.fullName.substring(0,fullNameIndex+1) + this.formTreeData.name;
        OrganizationService.saveOrUpdate(this.formTreeData).then((res: ResponseModel<TreeNodeModel[]>) => {
            if (res.status === ResponseStatusEnum.success) {
                this.baseMessage('tips.updateSuccess', MessageTypeEnum.success);
                // 更新
                this.handleNodeClick(this.treeNode, this.currentNode);
                this.currentNode.data = this.formTreeData;
            }
        });
    };

    /**
     * 停用、启用
     */
    private Deactivate() {
        this.baseConfirm('label.enableConfirm', 'label.tips', () => {
            OrganizationService.disableOrg(this.treeNode.orgId).then((res: ResponseModel) => {
                if (res.status === ResponseStatusEnum.success) {
                    this.baseMessage('tips.operatingSuccess', MessageTypeEnum.success);
                    // 更新
                    this.enabled = !this.enabled;
                    this.currentNode.data.enabled = !this.currentNode.data.enabled;
                    this.currentNode.childNodes.forEach(item => item.data.enabled = !item.data.enabled);
                }
            });
        }, () => {
        });
    };

    /**
     * 删除
     */
    private delData() {
        this.baseConfirm('label.deletionConfirm', 'label.tips', () => {
            OrganizationService.OrganizationDelete(this.treeNode.orgId).then((res: ResponseModel) => {
                if (res.status === ResponseStatusEnum.success) {
                    this.baseMessage('tips.deletionSuccess', MessageTypeEnum.success);
                    // 更新
                    this.$refs.leftTree.remove(this.currentNode);
                    this.currentNode = null;
                    this.formTreeData = new TreeNodeModel();
                }
            });
        }, () => {
        })
    };

    /**
     * 关闭弹窗时
     */
    private onCross() {
        this.formAddData = new TreeNodeModel();
    };

    /**
     * 打印二维码
     */
    private printCode() {

    };

    /**
     * 修改上级
     */
    private selectClick(data: TreeNodeModel, Node: TreeNode<any, any>) {
        this.fullNameText = [];
        this.findFullName(Node);
        this.fullNameText.reverse();
        this.formTreeData.fullName = this.fullNameText.join('/');
        this.formTreeData.parentName = Node.label;
    };

    /**
     * 拼接上级全称用
     */
    private findFullName(Node: TreeNode<any, any>) {
        if (Node.label) {
            this.fullNameText.push(Node.label);
            this.findFullName(Node.parent);
        }
    };

    /**
     * 拖拽改变左右大小
     */
    private dragControllerDiv() {
        let resize: HTMLCollectionOf<Element> = document.getElementsByClassName('resize');
        let left: HTMLCollectionOf<Element> = document.getElementsByClassName('resizeLeft');
        for (let i = 0; i < resize.length; i++) {
            // 鼠标按下事件
            resize[i]['onmousedown'] = function (e: Component): boolean {
                //颜色改变提醒
                // resize[i].style.background = '#818181';
                let startX = e.clientX;
                resize[i]['left'] = resize[i]['offsetLeft'];
                // 鼠标拖动事件
                document.onmousemove = function (e) {
                    const endX: number = e.clientX;
                    //左边宽度
                    let moveLen: number = resize[i]['left'] + (endX - startX);
                    // 左边最小宽度200px
                    if (moveLen < 200) {
                        moveLen = 200;
                    }
                    // 设置resize的位置
                    resize[i]['style'].left = moveLen;

                    for (let j = 0; j < left.length; j++) {
                        left[j]['style'].width = moveLen + 'px';
                    }
                };
                // 鼠标松开事件
                document.onmouseup = function () {
                    //颜色恢复
                    resize[i]['style'].background = '#f0f0f0';
                    document.onmousemove = null;
                    document.onmouseup = null;
                    //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
                    resize[i]['releaseCapture'] && resize[i]['releaseCapture']();
                };
                //该函数在属于当前线程的指定窗口里设置鼠标捕获
                resize[i]['setCapture'] && resize[i]['setCapture']();
                return false;
            };
        }
    };
};
</script>
<style lang="scss" scoped>;

::v-deep .el-input-group__prepend {
    padding: 0;
}

::v-deep.el-dropdown-menu.el-popper.el-dropdown-menu--small {
    border-radius: 10px;
    padding: 10px;

    .el-dropdown-menu__item {
        border-radius: 4px;
        text-align: center;

        &:hover {
            background-color: $base-button-default;
            color: $base-color-white;
        }
    }
}

.organization-container {
    width: 100%;
    padding: 0 20px 0 0;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc( 100vh - 70px - 60px - 20px * 2 );

    ::v-deep .el-dialog {
        min-width: 740px;
    }

    .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;

        .el-dropdown {
            .el-button {
                margin-right: 8px;

                i {
                    margin-left: 8px;
                }
            }
        }
    }

    .content {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        border: 1px solid #cbcfd7;
        border-radius: 8px;
        flex: 1;

        .resizeLeft {
            /*左侧初始化宽度*/
            width: calc(32% - 10px);
            min-width: 250px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: $base-color-white;


            .leftRoll{
                overflow: auto;
                &::-webkit-scrollbar {
                    display: none;
                }
            }
            .disabled-node {
                color: $base-font-color-seat;
            }

            //左边搜索框
            .el-input {
                padding: 20px;

                ::v-deep .el-input-group__prepend {
                    width: 50px;
                    border-radius: 6px 0 0 6px;
                    text-align: center;
                    background-color: $base-button-default;
                    color: #fff;
                    transform: translateX(4px);
                    .el-icon-search{
                        font-size: 18px;
                    }
                }
            }

            .el-tree {
                padding-left: 20px;
            }

            .footer {
                border-top: 1px solid $base-color-border;;
                background-color: $base-color-background;
                padding: 10px 10px;

                .count {
                    display: inline-block;
                    width: 50%;

                    &:last-child {
                        padding-left: 10px;
                        border-left: 2px solid $base-color-border;
                    }
                }
            }
        }

        /*拖拽区div样式*/
        .resize {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: col-resize;
            position: relative;
            top: 45%;
            background-color: #f0f0f0;
            min-width: 10px;
            background-size: cover;
            background-position: center;
            /*z-index: 99999;*/
            font-size: 32px;
            color: white;

        }

        /*拖拽区鼠标悬停样式*/
        .resize:hover {
            color: #444444;
        }

        /*右侧div样式*/
        .mid {
            width: 100%; /*右侧初始化宽度*/
            min-width: 740px;
            background: $base-color-white;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: auto;
            max-height: calc( 100vh - 70px - 60px - 20px * 2 );
        }
    }

    .el-form {
        ::v-deep .el-form-item__label {
            font-weight: 600;
        }

        .fromInput {
            display: flex;
            justify-content: space-around;

            .fromLeft {
                margin-right: 40px;
            }

            .el-form-item {
                width: 330px;
                padding: 0 10px;
            }
        }
    }

    .formBtn {
        text-align: right;
        .gray{
            color: #ccc;
            border: 1px solid #ccc;
            background-color: #fff;
        }
    }
}

</style>
